<template>
	<view class="performance">
		<view style="width: 100%;height: 90rpx;"></view>
		<view class="tab_box">
			<view class="tab_box_li" :class="currTab===item?'active':''" v-for="(item,index) in tabList" :key="index"
				@click="tabbind(item)">
				{{item}}
			</view>
		</view>
		<view class="content_box my-mgt-5">
			<view class="content_box_tabs">
				<view class="content_box_tabs_li" :class="currSwitch===t.id?'active_bg':''" @click="switchTab(t.id,t.companyName)"
					v-for="(t,i) in switching" :key="i">
					<view :class="currSwitch===t.id?'bg':''" class="kong my-mgr-15"></view>
					{{t.companyName}}
				</view>
			</view>
			<view class="content_box_broken">
				<!-- 日月 -->
				<view class="daymonth">
					<view class="day_month_box">
						<view class="day_month_box_item" @click="changeDay(m.type)"
							:class="currdayMonth===m.type?'active_item':''"  v-for="(m,j) in daymonthArr" :key="j">
							{{m.name}}
						</view>
					</view>
				</view>
				<!-- eCharts -->
				<view class="content_box_broken_canv">
					<canvas canvas-id="canvasLine" id="canvasLine" class="charts" disable-scroll=true
						@touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				</view>
				<!-- 交易额 -->
				<turnover :currSwitch="currSwitch" :perDataDev="perDataDev" @getSonData="getSonData" :companyName="companyName" :currTab="currTab" :newimgfir="newimgfir" :newimgtwo="newimgtwo" :newimgthree="newimgthree"></turnover>
			</view>
		</view>
		<tabbar></tabbar>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import tabbar from "@/components/tabbar/tabbar.vue";
	import turnover from '@/components/turnover/turnover.vue';
	import { companyApi ,activationApi ,perdataApi } from "@/api/results.js";
	let canvasLine = null
	export default {
		components: {
			turnover,
			tabbar
		},
		data() {
			return {
				tabList: ["交易额", "交易笔数", "机具激活"],
				currTab: '交易额',
				switching: [],//公司数组
				currSwitch: 1,//公司id
				daymonthArr: [{name:'日',type:'DAY'},{name:'月',type:'MONTH'}],//DAY(日), MONTH(月), YEAR(年)
				currdayMonth: 'DAY',
				pixelRatio: 1,
				results: [],//曲线数组
				newimgfir: '',//1图片
				newimgtwo: '',//2图片
				newimgthree: '',//3图片
				companyName:'',//子组件
				perDataDev:[],//子组件
			};
		},
		onLoad() {
			this.getCompany()
			this.getPolyData()
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: (res) => {
					if (res.pixelRatio > 1) {
						// 正常这里给2就行，如果pixelRatio=3性能会降低一点
						this.pixelRatio = 2;
					}
				}
			});
			//#endif
		},
		mounted() {
			this.chanimg()
		},
		methods: {
			// 获取公司列表
			async getCompany(){
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await companyApi({})
				if(res.statusCode === 200){
					uni.hideLoading()
					this.switching = res.data.data
					this.companyName = res.data.data[0].companyName
				}
			},
			// tab切换
			tabbind(item) {
				this.currTab = item
				this.chanimg()
			},
			chanimg(){
				if (this.currTab === '交易额') {
					this.newimgfir = 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/iUjSxojIfm_turn_1.png'
					this.newimgtwo = 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/yBBaWIsSmY_turn_2.png'
					this.newimgthree = 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/oNSuXDLtnG_turn_3.png'
					this.getPolyData()
					this.getSonData('DAY')
				} else if (this.currTab === '交易笔数') {
					this.newimgfir = 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/tPmSSICJLb_trad_1.png'
					this.newimgtwo = 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/LizofXeKLl_trad_2.png'
					this.newimgthree = 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/PGBDiHmpqA_trad_3.png'
					this.getPolyData()
					this.getSonData('DAY')
				} else if (this.currTab === '机具激活') {
					this.newimgfir = 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/TFaLfdaiwM_tools_1.png'
					this.newimgtwo = 'https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/TFaLfdaiwM_tools_1.png'
					this.getPolyData()
					this.getSonData('DAY')
				}
			},
			// 二级tab切换
			switchTab(t,n) {
				this.currSwitch = t
				this.companyName = n
				this.getPolyData()
				this.getSonData('DAY')
			},
			// 日月切换
			changeDay(m) {
				this.currdayMonth = m
				if(this.currdayMonth==='DAY' ||this.currdayMonth==='MONTH'){
					this.getPolyData()
				}
			},
			// 子组件获取数据
			async getSonData(times){
				let params = {
					companyId: this.currSwitch,
					interval:3,
					timeType:times
				}
				uni.showLoading({
					title: "正在加载中...."
				})
				var url =''
				if (this.currTab === '交易额') {
					url = "/user/achieve/transfer/data/list"
				} else if (this.currTab === '交易笔数') {
					url = "/user/achieve/transfer/number/data/list"
				} else if (this.currTab === '机具激活') {
					url = "/user/achieve/activation/number/data/list"
				}
				const res = await perdataApi(url,params)
				if(res.statusCode ===200 ){
					uni.hideLoading()
					this.perDataDev = res.data.data
				}
			},
			async getPolyData() {
				let params = {
					companyId:this.currSwitch,
					interval:7,
					timeType:this.currdayMonth,
				}
				uni.showLoading({
					title: "正在加载中...."
				})
				var url =''
				if (this.currTab === '交易额') {
					url = "/user/achieve/transfer/curve/list"
				} else if (this.currTab === '交易笔数') {
					url = "/user/achieve/transfer/number/curve/list"
				} else if (this.currTab === '机具激活') {
					url = "/user/achieve/activation/number/curve"
				}
				const res = await activationApi(url,params)
				if(res.statusCode === 200){
					uni.hideLoading()
					var LineA = {
						categories: [],
						series: []
					}
					let results = res.data.data
					if (results == null || results.length == 0) {
						// let date = new Date()
						// let month = date.getMonth() + 1
						// month = month > 9 ? month : '0' + month;
						// let day = date.getDate()
						// day = day > 9 ? day : '0' + day;
						LineA.categories =this.currdayMonth==='DAY'? ['今日']:['本月']
						LineA.series = [{
							name: "",
							data: [0],
							type: 'line',
							style: 'curve',
							color: '#ff5500'
						}];
					} else {
						LineA.categories = []
						LineA.series = [{
							name: "",
							data: [],
							type: 'line',
							style: 'curve',
							color: '#ff5500'
						}];
						for (var i = 0; i < results.length; i++) {
							if (this.currTab === '交易额') {
								LineA.series[0].data.push(results[i].profit);
							} else if (this.currTab === '交易笔数') {
								LineA.series[0].data.push(results[i].transferNumber);
							} else if (this.currTab === '机具激活') {
								LineA.series[0].data.push(results[i].activationNumber);
							}
							LineA.categories.push(results[i].timeValue.slice(5,results[i].timeValue.length));
						}
					}
					//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
					LineA.categories = LineA.categories;
					LineA.series = LineA.series;
					this.showLineA('canvasLine', LineA);
				}
			},
			showLineA(canvasId, chartData) {
				canvasLine = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [0, 0, 0, -33], //空白区域值
					dataLabel: false, //控制是否显示价钱
					dataPointShape: true,
					pixelRatio: this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true, //开启图表拖拽功能
					xAxis: {
						type: 'grid',
						gridType: 'dash',
						dashLength: 8,
						itemCount: 7, //数据显示个数
						scrollAlign: 'left',
						scrollShow: false, //是否显示滚动条
						disableGrid: true,

					},
					yAxis: {
						disableGrid: true,
						splitNumber: 4,//Y轴显示的个数
						min: 50,//最小金额
						max: 200,//最大金额
					},
					width: 290,
					height: 210,
					extra: {
						line: {
							type: 'curve'
						}
					}
				});
			},
			touchLineA(e) {
				canvasLine.scrollStart(e);
			},
			moveLineA(e) {
				canvasLine.scroll(e);
			},
			touchEndLineA(e) {
				canvasLine.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasLine.touchLegend(e);
				canvasLine.showToolTip(e, {
					format: function(item, category) {
						return '￥' + item.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.performance {
		width: 100%;
		background: #FFFFFF;
		margin-bottom: -150rpx;

		.tab_box {
			width: 100%;
			height: 135rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 8rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: flex-end;

			.tab_box_li {
				width: 33.3%;
				height: 105rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}

			.active {
				color: #F05329;
			}
		}

		.content_box {
			width: 100%;
			height: 1100rpx;
			display: flex;

			.content_box_tabs {
				width: 190rpx;
				height: 911rpx;
				background: #F7F7F7;

				.content_box_tabs_li {
					width: 100%;
					height: 130rpx;
					display: flex;
					align-items: center;
					text-align: center;
					font-size: 30rpx;
					font-weight: 500;
					color: #666666;

					.bg {

						background: #000000;
					}

					.kong {
						width: 12rpx;
						height: 42rpx;
					}
				}

				.active_bg {
					font-weight: 800;
					color: #333333;
					background: #FFFFFF;
				}
			}

			.content_box_broken {
				width: 560rpx;
				height: 911rpx;
				background: #FFFFFF;

				.content_box_broken_canv {
					width: 520rpx;
					height: 460rpx;
					margin: auto;
					background: linear-gradient(0deg, #FDECE8 0%, rgba(240, 83, 41, 0) 100%);
					border-radius: 10rpx;
					overflow: hidden;

					.charts {
						width: 100%;
						height: 430rpx;
					}
				}

				.daymonth {
					width: 520rpx;
					height: 110rpx;
					margin: auto;
					display: flex;
					align-items: flex-end;
					justify-content: center;
					background: #FFFDFC;

					.day_month_box {
						width: 150rpx;
						height: 50rpx;
						background: #FDECE8;
						border-radius: 25rpx;
						display: flex;
						align-items: center;

						.day_month_box_item {
							width: 50%;
							height: 100%;
							text-align: center;
							line-height: 50rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #000000;
						}

						.active_item {
							background: #F05329;
							border-radius: 25px;
							font-size: 24rpx;
							font-weight: 500;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
